<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>dmn-js viewer example</title>

    <!-- required viewer styles -->
    <link rel="stylesheet" href="https://unpkg.com/dmn-js@17.2.0/dist/assets/dmn-js-shared.css">
    <link rel="stylesheet" href="https://unpkg.com/dmn-js@17.2.0/dist/assets/dmn-js-drd.css">
    <link rel="stylesheet" href="https://unpkg.com/dmn-js@17.2.0/dist/assets/dmn-js-decision-table.css">
    <link rel="stylesheet" href="https://unpkg.com/dmn-js@17.2.0/dist/assets/dmn-js-literal-expression.css">
    <link rel="stylesheet" href="https://unpkg.com/dmn-js@17.2.0/dist/assets/dmn-font/css/dmn.css">

    <!-- example styles -->
    <style>
      html, body, #canvas {
        height: 100%;
        padding: 0;
        margin: 0;
      }
    </style>
  </head>
  <body>
    <div id="canvas"></div>

    <!-- viewer distro -->
    <script src="https://unpkg.com/dmn-js@17.2.0/dist/dmn-viewer.development.js"></script>

    <script>
      const diagramUrl = 'https://cdn.statically.io/gh/bpmn-io/dmn-js-examples/a71e16/starter/diagram.dmn';

      // viewer instance
      const dmnViewer = new DmnJS({
        container: '#canvas'
      });

      /**
       * Open diagram in our viewer instance.
       *
       * @param {String} diagramUrl to retrieve the dmnXML from
       */
      async function openDiagram(diagramUrl) {

        // fetch diagram
        const response = await fetch(diagramUrl);

        dmnXML = await response.text();

        // import diagram
        try {
          const { warnings } = await dmnViewer.importXML(dmnXML);

          // fetch currently active view
          const activeView = dmnViewer.getActiveView();

          // apply initial logic in DRD view
          if (activeView.type === 'drd') {
            const activeEditor = dmnViewer.getActiveViewer();

            // access active editor components
            const canvas = activeEditor.get('canvas');

            // zoom to fit full viewport
            canvas.zoom('fit-viewport');
          }
        } catch (err) {
          console.error('could not import DMN 1.3 diagram', err);
        }
      }

      openDiagram(diagramUrl);
    </script>
  </body>
</html>
